<template>
  <div>
    <el-page-header @back="goBack">
</el-page-header>
    <div>
      客户名称<el-select v-model="data.userName" placeholder="请选择客户的姓名">
        <el-option
          v-for="item in clientNames"
          :key="item.id"
          :label="item.name"
          :value="item.name">
        </el-option>
      </el-select>
    </div>
    <div style="height: 30px;"></div>
    <div>
      业务类型<el-select v-model="data.rechargeType" placeholder="请选择业务类型">
        <el-option
          label="充值"
          value="充值">
        </el-option>
      </el-select>
    </div>
    <div style="height: 30px;"></div>
    <div>
      <el-input v-model="data.money" placeholder="请输入充值金额"></el-input>
    </div>
    <div style="height: 30px;"></div>
    <el-upload
      class="upload-demo"
      action="http://localhost:8080/api/file/upload/"
      :on-success="handleAvatarSuccess"
      :file-list="fileList"
      list-type="picture">
      <el-button size="small" type="primary">点击上传原始收据</el-button>
    </el-upload>
    <div style="height: 30px;"></div>
    <el-button type="primary" @click="commit()">提交</el-button>
  </div>
</template>
<script>
export default{
  data(){
    return {
      clientNames:[],
      fileList: [],
      data:{
        userName:'',
        rechargeType:'',
        money:'',
        receipt:''
      }
      
    }
  },
  methods: {

    handleAvatarSuccess(res, file) {
        console.log(res.data);
        this.data.receipt = res.data
      },
      goBack(){
        this.$router.push("/addmoney")
      },

      commit(){
        console.log(this.data);
        this.$axios.post("finance/addRecharge",this.data).then(res => {
          if(res.data.code == 200){
            this.$message.success("添加成功")
            this.$router.push("/addmoney")
          }else{
            this.message.error("添加失败");
          }
        })
      }
    },
  mounted:function(){
    this.$axios.get("businessCompetitor/getName").then(res => {
      console.log(res.data.data);
      this.clientNames = res.data.data
    })
  }
}
</script>
<style scoped></style>